<!DOCTYPE html>

<html>
<head>
  <title>monogodb restapi</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css">
   table, th, td
   {
	   border-collapse:collapse;
	   border: 1px solid black;
   }
   th{
	   background-color:#555;
	   color:#fff;
	   vertical-align:center;
   }
  
   td{
	   text-align:left;
	   vertical-align:center;
	   padding:5px;
   }
   caption{
	   padding:5px;
	   font-size:18px;
   }
   .logo{
	   padding:0px 0px 0px 20px;
	   background:url(/static/img/mongodb-logo-white.png);
	   background-size:18px 38px;
	   background-repeat:no-repeat;
   }
   ul{
	   background-color:#f5f5f5;
	   padding:15px;
	   border: 1px solid #f0f0f0;
   }
   li {
	   font-size:20px;
	   list-style :none;
	   padding:0px 0px 0px 20px;
	   background:url(/static/img/database22.png);
	   background-size:20px 20px;
	   background-repeat:no-repeat;
   }
   li a{
	   text-decoration:none;
	   color:#4CAF50;
   }
  </style>
</head>

<body>
  <header>
      <h1 class="logo">MonogoDB </h1>
  </header>
  <div>
	  <table>
		  <caption>MongoDB Info</caption>
		  <thead>
			  <tr>
				  <th>property</th>
				  <th>value</th>	  
			  </tr>
		  </thead>
		  <tbody id="db_info">
			  <tr>
				  <td>Version</td>
				  <td>{{.Version}}</td>
			  </tr>
			  <tr>
				  <td>Git Version</td>
				  <td>{{.GitVersion}}</td>
			  </tr>
			  <tr>
				  <td>SysInfo</td>
				  <td>{{.SysInfo}}</td>
			  </tr>
		  </tbody>
	  </table>
	  <h2>Database Names</h2>
	  <ul>
		  {{range .DbNames}}
		  <li><a href="/{{.}}">{{.}}</a></li>
		  {{end}}
	  </ul>
	
  </div>
  <script type="text/javascript" src="/static/js/jquery-2.2.0.min.js"></script>
  <script type="text/javascript">
   $(function(){
	   $.get("/json/test/__server_status__", function(json){
		   var a = "<tr><td>{Name}</td><td>{Value}</td></tr>";
		   var names = ["host","pid","process","writeBacksQueued"];
		   var html = "";
		   for(i in names){
			   var key = names[i];
			   html = html + a.replace("{Name}",key).replace("{Value}",json[key]);
		   }
		   html = html +  a.replace("{Name}","opcounters.command").replace("{Value}", json.opcounters.command);
		   html = html +  a.replace("{Name}","opcounters.delete").replace("{Value}", json.opcounters.delete);
		   html = html +  a.replace("{Name}","opcounters.getmore").replace("{Value}", json.opcounters.getmore);
		   html = html +  a.replace("{Name}","opcounters.insert").replace("{Value}", json.opcounters.insert);
		   html = html +  a.replace("{Name}","opcounters.query").replace("{Value}", json.opcounters.query);
		   html = html +  a.replace("{Name}","opcounters.update").replace("{Value}", json.opcounters.update);
		   $("#db_info").append(html);
	   });
   });
  </script>
</body>
</html>
